<template>
  <div>
    <el-alert
      show-icon
      title="注意:只允许为第三级分类设置相关参数！"
      type="warning"
      :closable="false"
      effect="dark"
    >
    </el-alert>
    <!-- 级联 -->
    <el-cascader
      @change="change_cascader"
      v-model="result"
      :options="list"
      :props="{ label: 'cat_name', value: 'cat_id', checkStrictly: true }"
      clearable
    ></el-cascader>
    <!-- tab切换 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="many">
        <el-button type="primary" @click="addlist" :disabled="isbtn"
          >添加参数</el-button
        >
        <!-- 添加参数模态框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="动态参数" prop="attr_name">
              <el-input v-model="ruleForm.attr_name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >立即创建</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 编辑参数模态框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%">
          <el-form
            :model="ruleForm1"
            :rules="rules"
            ref="ruleForm1"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="动态参数" prop="attr_name">
              <el-input v-model="ruleForm1.attr_name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="edit">确定修改</el-button>
              <el-button @click="resetForm('ruleForm1')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 表格 -->
        <el-table :data="manylist" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-tag
                :key="tag"
                v-for="(tag, i) in scope.row.attr_vals"
                closable
                :disable-transitions="false"
                @close="handleClose(scope.row, i)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                style="width: 100px"
                class="input-new-tag"
                v-if="scope.row.inputVisible"
                v-model="scope.row.inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm(scope.row)"
                @blur="handleInputConfirm(scope.row)"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput(scope.row)"
                >+ New Tag</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="商品 ID" prop="attr_id"> </el-table-column>
          <el-table-column label="参数名称" prop="attr_name"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 静态 -->
      <el-tab-pane label="静态属性" name="only">
        <el-button type="primary" @click="addlist" :disabled="isbtn"
          >添加参数</el-button
        >
        <!-- 添加参数模态框 -->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="静态属性" prop="attr_name">
              <el-input v-model="ruleForm.attr_name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >立即创建</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 编辑参数模态框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%">
          <el-form
            :model="ruleForm1"
            :rules="rules"
            ref="ruleForm1"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="动态参数" prop="attr_name">
              <el-input v-model="ruleForm1.attr_name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="edit">确定修改</el-button>
              <el-button @click="resetForm('ruleForm1')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 表格 -->
        <el-table :data="onlylist" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-tag
                :key="tag"
                v-for="(tag, i) in scope.row.attr_vals"
                closable
                :disable-transitions="false"
                @close="handleClose(scope.row, i)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                style="width: 100px"
                class="input-new-tag"
                v-if="scope.row.inputVisible"
                v-model="scope.row.inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm(scope.row)"
                @blur="handleInputConfirm(scope.row)"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput(scope.row)"
                >+ New Tag</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="商品 ID" prop="attr_id"> </el-table-column>
          <el-table-column label="参数名称" prop="attr_name"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { categorys, cates, addcate, del, addtags } from "../utils/api";
export default {
  data() {
    return {
      ruleForm: {}, //添加参数模态框
      ruleForm1: {}, //编辑参数模态框
      rules: {
        attr_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      dialogVisible: false, //添加参数列表
      dialogVisible1: false, //编辑参数列表
      activeName: "many", //tab切换 默认值
      result: [],
      list: [],
      manylist: [],
      onlylist: [],
    };
  },
  methods: {
    // 添加参数模态框
    addlist() {
      this.dialogVisible = true;
    },
    // 确定添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.activeName);
          addcate({
            id: this.result[this.result.length - 1],
            attr_name: this.ruleForm.attr_name,
            attr_sel: "many",
          }).then((res) => {
            console.log(res);
            if (res.data.meta.status == 201) {
              this.$message({
                message: "恭喜你,添加成功",
                type: "success",
              });
            }
            this.getData();
            this.dialogVisible = false; //关闭模态框
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 编辑
    handleEdit(row) {
      console.log(row);
      this.dialogVisible1 = true;
      this.ruleForm1 = row;
    },
    // 确定编辑
    edit() {
      console.log(this.ruleForm1);
      addtags({
        id: this.ruleForm1.cat_id,
        attrId: this.ruleForm1.attr_id,
        attr_name: this.ruleForm1.attr_name,
        attr_vals: this.ruleForm1.attr_vals.join(","),
        attr_sel: this.ruleForm1.attr_sel,
      }).then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.$message({
            message: "恭喜你，修改成功",
            type: "success",
          });
        }
         this.getData();
        this.dialogVisible1 =false;
           
      });
    },
    //   删除
    handleDelete(row) {
      console.log(row);
      del({
        id: this.result[this.result.length - 1],
        attrid: row.attr_id,
      }).then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.$message({
            message: "恭喜你,删除成功",
            type: "success",
          });
        }
        this.getData();
      });
    },

    handleClose(row, i) {
      row.attr_vals.splice(i, 1);
      console.log(row);
      console.log(this.result);
      addtags({
        id: this.result[2],
        attrId: row.attr_id,
        attr_name: row.attr_name,
        attr_vals: row.attr_vals.join(","),
        attr_sel: row.attr_sel,
      }).then((res) => {
        console.log(res);
      });
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      console.log(tab.index);

      cates({
        id: this.result[this.result.length - 1],
        sel: tab.index == 0 ? "only" : "many",
      }).then((res) => {
        // console.log(this.activeName)
        console.log(res);
        res.data.data.forEach((item) => {
          item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : []; //如果属性值为空是false否则是true
          item.inputVisible = false; //状态
          item.inputValue = "";
        });
        this.manylist = res.data.data;
        this.onlylist = res.data.data;
        console.log(this.onlylist);
      });
    },
    handleInputConfirm(row) {
      console.log(row);
      let inputValue = row.inputValue;
      if (inputValue == " ") {
        return false;
      }
      if (inputValue) {
        row.attr_vals.push(row.inputValue);
      }
      addtags({
        id: this.result[2],
        attrId: row.attr_id,
        attr_name: row.attr_name,
        attr_vals: row.attr_vals.join(","),
        attr_sel: row.attr_sel,
      }).then((res) => {
        console.log(res);
      });
      row.inputVisible = false;
      row.inputValue = "";
    },
    showInput(row) {
      row.inputVisible = true; //当前行输入框显示
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus(); //获得焦点
      });
    },
    // // 添加tag标签
    // addtags()
    // 级联
    change_cascader() {
      //   console.log(this.result);
      if (this.result.length == 3) {
        this.getData();
      }
    },
    getData() {
      console.log("1", this.activeName);
      cates({
        id: this.result[this.result.length - 1],
        sel: "only",
      }).then((res) => {
        console.log("288", res.data.data);
        res.data.data.forEach((item) => {
          item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : []; //如果属性值为空是false否则是true
          item.inputVisible = false; //状态
          item.inputValue = "";
        });
        this.manylist = res.data.data;
        this.onlylist = res.data.data;
        console.log(this.onlylist);
      });
    },
  },
  created() {
    categorys().then((res) => {
      //   console.log(res);
      this.list = res.data.data;
    });
  },
  mounted() {},
  components: {},
  computed: {
    isbtn() {
      if (this.result.length !== 3) {
        return true;
      } else {
        return false;
      }
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped></style>
